import { defineComponent, h, resolveDirective, withDirectives } from "vue";

export default defineComponent({
    props: {
        delay: {
            type: Number,
            default: 50,
        },
    },
    render() {
        /*
            Note[vue] resolveDirective
            返回一个已存在指令的对象或函数, motion指令已经在main.ts中注册
            参考: https://blog.csdn.net/weixin_43294560/article/details/117337934
         */
        const motion = resolveDirective("motion");

        /*
            Note[vue] h: 创建虚拟节点的函数，接收三个参数
            - type 元素的类型
            - propsOrChildren 数据对象, 这里主要表示(props, attrs, dom props, class 和 style)
            - children 子节点
        */
        /*
            Note[vue] $slots.default!()
            - this.$slots 访问当前组件的所有插槽
            - .default 获取默认插槽（没有名称的插槽）
            - ! TypeScript 非空断言操作符，告诉编译器这个值不会是 null 或 undefined
            - () 执行插槽函数来渲染内容
        */
        /*
            Note[vue] $slots.default!()
            - this.$slots 访问当前组件的所有插槽
            - .default 获取默认插槽（没有名称的插槽）
            - ! TypeScript 非空断言操作符, 告诉编译器这个值不会是 null 或 undefined
            - () 执行插槽函数来渲染内容
        */
        /*
            Note[vue] withDirectives(vnode, directives)
            允许将指令应用于VNode, 返回一个包含应用指令的VNode, 只能在render或setup函数中使用。
            参考: https://cn.vuejs.org/api/render-function.html#withdirectives
        */
        return withDirectives(h("div", {}, this.$slots.default!()), [
            [
                motion,
                {
                    initial: { opacity: 0, y: 100 },
                    enter: {
                        opacity: 1,
                        y: 0,
                        transition: {
                            delay: this.delay,
                        },
                    },
                },
            ],
        ]);
    },
});
